
<!DOCTYPE html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.util.*"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt"  prefix="fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta name="keywords" content="CSS3" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>报名页面</title>
<link href="css/mystyle4.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="${pageContext.request.contextPath }/js/AjaxRequest.js"></script>
<style>

	/* 
	Max width before this PARTICULAR table gets nasty
	This query will take effect for any screen smaller than 760px
	and also iPads specifically.
	*/
	@media 
	only screen and (max-width: 760px),
	(min-device-width: 768px) and (max-device-width: 1024px)  {
	
		/* Force table to not be like tables anymore */
		table, thead, tbody, th, td, tr { 
			display: block; 
		}
		
		/* Hide table headers (but not display: none;, for accessibility) */
		thead tr { 
			position: absolute;
			top: -9999px;
			left: -9999px;
		}
		
		tr { border: 1px solid #ccc; }
		
		td { 
			/* Behave  like a "row" */
			border: none;
			border-bottom: 1px solid #eee; 
			position: relative;
			padding-left: 50%; 
		}
		
		td:before { 
			/* Now like a table header */
			position: absolute;
			/* Top/left values mimic padding */
			top: 6px;
			left: 6px;
			width: 45%; 
			padding-right: 10px; 
			white-space: nowrap;
		}
		
		/*
		Label the data
		*/
		td:nth-of-type(1):before { content: "期号"; }
		td:nth-of-type(2):before { content: "标题"; }
		td:nth-of-type(3):before { content: "培训部门号"; }
		td:nth-of-type(4):before { content: "培训类型"; }
	    td:nth-of-type(5):before { content: "报名时间"; }
		td:nth-of-type(6):before { content: "状态"; }
	}
	
	/* Smartphones (portrait and landscape) ----------- */
	@media only screen
	and (min-device-width : 320px)
	and (max-device-width : 480px) {
		body { 
			padding: 0; 
			margin: 0;  }
		}
	
	/* iPads (portrait and landscape) ----------- */
	@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
		body { 
			width: 100%; 
		}
	}

</style>

<script type="text/javascript">

 	function btn(id){
		var loader=new net.AjaxRequest("${pageContext.request.contextPath }/sign/insertsign.action?id="+id+"&nocache="+     new Date().getTime(), deal_btn, onerror, "GET");
	
	}
	
	function deal_btn(){
		alert(this.req.responseText);
		window.location.href="${pageContext.request.contextPath }/sign/querysigns.action";
	}
	
	function btn1(id){
		var loader=new net.AjaxRequest("${pageContext.request.contextPath }/sign/deletesign.action?id="+id+"&nocache="+     new Date().getTime(), deal_btn, onerror, "GET");
		
		}
	

	function onerror(){
	alert("您的操作有误!");
	}





</script>
</head>
<body>

<div class="page-wrap">
  <table   >
    <thead>
      <tr>
        <th>期号</th>
        <th>标题</th>
        <th>培训部门号</th>
        <th>培训类型</th>
        <th>报名时间</th>
        <th>状态</th>
      </tr>
      
    </thead>
    
    <tbody>
      <c:forEach  items="${ noticesExpect}"  var="Expect">
        <tr>
          <td   > ${Expect.id} </td>
          <td   >  <a  href="${Expect.url}">${Expect.title}</a></td>
          <td >  ${Expect.department}</td>
          <td >  ${Expect.type}</td>
          <td > <fmt:formatDate value="${Expect.begin}"/> 至  &nbsp;<fmt:formatDate value="${Expect.end}" />   </td>
          <td > 
            <c:set var="nowdate" value="<%=new Date() %>"></c:set>
            
            <c:if test="${nowdate>=Expect.begin&&nowdate<=Expect.end }"> <button type="button"  onClick="btn(this.value);" value="${Expect.id}">报名</button> </c:if>
            
            <c:if test="${nowdate<Expect.begin }">未开始</c:if>
            <c:if test="${nowdate>Expect.end }">已结束</c:if>
          </td>
        </tr>
      </c:forEach>
    </tbody>
    </table>
</div>


<hr>
已报名
  <div class="page-wrap">
    <table  >
    <tbody>
      <c:forEach  items="${ noticesExists}"  var="Exists">
        <tr>
          <td> ${Exists.id} </td>
          <td>  <a  href="${Exists.url}">${Exists.title}</a></td>
          <td>  ${Exists.department}</td>
          <td>  ${Exists.type}</td>
           <td > <fmt:formatDate value="${Exists.begin}"/> 至<fmt:formatDate value="${Exists.end}"/>   </td>
          <td> <button type="button" onClick="btn1(this.value);" value="${Exists.id}">取消报名</button></td>
        </tr>
      </c:forEach>
      </tbody>
      </table>
  </div>
 
 

</body>
</html>